import React, { useEffect, useRef } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'

export default function Input({
  extra,
  onExtraClick,
  className,
  onFocus,
  ...rest
}) {
  const inputRef = useRef(null)
  useEffect(() => {
    if (onFocus) {
      inputRef.current.focus()
    }
  }, [onFocus])

  return (
    <div className={classNames(styles.root, className)}>
      <input {...rest} className="input" ref={inputRef} />
      {extra && (
        <div className="extra" onClick={onExtraClick}>
          {extra}
        </div>
      )}
    </div>
  )
}
